import React, { Component } from 'react';

import { Tree, Menu, Dropdown, Icon } from 'antd';
import MyIcon from '@/components/MyIcon';
import { treeIcon } from '@/utils/utils'
import styles from './OrgTree.less';

const { TreeNode } = Tree;

class OrgTree extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
    };
  }

  componentDidMount() {
    const { treeData } = this.props;
    this.setState({
      expandedKeys: treeData[0] ? [treeData[0].id] : [],
    });
  }

  changeExpandedKeys = keys => {
    this.setState({
      expandedKeys: [...new Set([...this.state.expandedKeys, ...keys])],
    });
  };

  handleSubMenuClick = (e, item) => {
    e.domEvent.stopPropagation();
    this.props.onMenuClick && this.props.onMenuClick(e, item);
  };

  handleTreeSelect = (selectedKeys, node) => {
    this.props.onSelect && this.props.onSelect(selectedKeys, node);
  };

  handleDropDownClick = (e, item) => {
    // e.stopPropagation();
    this.props.onDropdown && this.props.onDropdown(item);
  };

  handleOnIconClick = (e, item) => {
    // e.stopPropagation();
    this.props.onIconClick && this.props.onIconClick(item);
  };

  renderActionMenu = item => {
    return (
      <Menu onClick={this.handleSubMenuClick}>
        {item.level < 5 && (
          <Menu.Item key="0">
            <Icon type="plus-circle" />
            &nbsp;&nbsp;添加
          </Menu.Item>
        )}
        <Menu.Item key="1">
          <Icon type="edit" />
          &nbsp;&nbsp;编辑
        </Menu.Item>
        <Menu.Item key="2">
          <Icon type="delete" />
          &nbsp;&nbsp;删除
        </Menu.Item>
      </Menu>
    );
  };

  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  renderTreeNodeTitle = item => {
    const icon = treeIcon(item);
    return (
      <div className={`${styles.treeNode} ${item.level === 1 ? styles.firstTreeNode : ''}`}>
        <span>
          <MyIcon className={styles.myIcon} type={icon} />
          {item.shortName}
        </span>
        {item.level === 1 ? (
          <Icon
            type="plus-circle"
            onClick={e => this.handleOnIconClick(e, item)}
            style={{
              fontSize: '18px',
              lineHeight: '48px',
              color: '#1890FF',
            }}
          />
        ) : (
            <Dropdown
              overlay={() => this.renderActionMenu(item)}
              trigger={['click']}
              placement="bottomLeft"
            >
              <div className={styles.action} onClick={e => this.handleDropDownClick(e, item)}>
                <Icon
                  style={{
                    fontSize: '24px',
                    lineHeight: '48px',
                    color: '#1890FF',
                  }}
                  type="ellipsis"
                />
              </div>
            </Dropdown>
          )}
      </div>
    );
  };

  renderTree = data => {
    return this.renderTreeNodes(data, 0);
  };

  renderTreeNodes = (data, treeLevel) => {
    treeLevel = treeLevel + 1;
    return data.map(item => {
      item.level = treeLevel;
      if (item.children) {
        return (
          <TreeNode title={this.renderTreeNodeTitle(item)} key={item.id} dataRef={item}>
            {this.renderTreeNodes(item.children, treeLevel)}
          </TreeNode>
        );
      }
      return <TreeNode title={this.renderTreeNodeTitle(item)} key={item.id} dataRef={item} />;
    });
  };

  render() {
    const { treeData } = this.props;
    const { expandedKeys, autoExpandParent } = this.state;
    const selectedKeys = this.props.selectedKeys;
    return (
      <div className={styles.tree}>
        <Tree
          selectedKeys={selectedKeys}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          onExpand={this.onExpand}
          onSelect={this.handleTreeSelect}
        >
          {this.renderTree(treeData)}
        </Tree>
      </div>
    );
  }
}

export default OrgTree;
